# Component: Video Player

Sequential media player with interactive action overlays

Media Block

### BEM Anatomy

| Type      | Class Name         | Description                                                                                                                                |
| --------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-video-player` | The relative container that anchors the video surface and the absolute action overlays.                                                    |
| Element   | `__actions`        | The logical grouping for all UI overlays (links and skip buttons).                                                                         |
| Element   | `__action`         | A wrapper for a specific button. Modifiers define the specific screen placement.                                                           |
| Modifier  | `__action--link`   | Positions an action at the bottom-center of the player.                                                                                    |
| Modifier  | `__action--skip`   | Positions an action at the top-right corner.                                                                                               |
| Element   | `__button`         | The base button component within the player, designed with high legibility and touch-friendly hit areas.                                   |
| Modifier  | `__button--link`   | Stylized as an informative overlay, often with a semi-transparent background to remain readable against varying video content.             |
| Modifier  | `__button--skip`   | Specifically styled for navigation, often utilizing a "blur" or "frosted glass" effect to minimize distraction while remaining accessible. |

### Playback & UI Logic

The player evaluates a `Sequence` model. If a sequence is present, it renders a native `<video>` tag with `autoplay` and `muted` attributes. Once the sequence ends (or is skipped), the component falls back to rendering the primary `iframe`.

##### Generated HTML (Sequence State)

```html
<div class="as-video-player custom-outer">
    <video autoplay muted controls>
        <source src="/uploads/video.mp4" type="video/mp4">
    </video>
    <div class="as-video-player__actions">
        <!-- Center Bottom Link -->
        <div class="as-video-player__action as-video-player__action--link">
            <a href="..." class="as-video-player__button--link">Read More</a>
        </div>
        <!-- Top Right Skip -->
        <div class="as-video-player__action as-video-player__action--skip">
            <button class="as-video-player__button--skip">Skip</button>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-video-player {
  position: relative; // Anchor for children

  &__action {
    position: absolute;
    padding: 1rem;

    &--link {
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &--skip {
      top: 0;
      right: 0;
    }
  }

  &__button--skip {
    border-radius: 50%; // Circular skip button
  }
}
```
